<template>
  <!-- 团购商品 -->
  <div>
    <!-- 头部 -->
    <el-space>
      <el-input v-model.trim="input.spuName" placeholder="请输入商品名称" />
      <el-input v-model.trim="input.id" placeholder="请输入团购ID" />
      <el-select v-model="input.status" placeholder="选择用户状态">
        <el-option label="冻结" value="0" />
        <el-option label="进行" value="1" />
        <el-option label="全部" value />
      </el-select>

      <el-button type="primary" @click="sous(input)">
        <span class="iconfont icon-icon-sousuo" style="margin-right: 10px"></span>查找
      </el-button>

      <!-- 添加对话框 -->
      <el-button type="text">
        <el-button type="primary" @click="addtan">
          <span class="iconfont icon-icon-B-tianjiabiji" style="margin-right: 10px"></span>添加
        </el-button>
      </el-button>
    </el-space>

    <!-- 表单 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <p style="padding-top: 15px;">
            <span style="padding: 0px 30px;color:#abbdd0;">类目ID</span>
            <span>{{props.row.spuId}}</span>
          </p>
          <p style="padding: 20px 30px;color:#abbdd0;">商品sku属性</p>
          <el-table :data="props.row.groupShopSkuDTOList" border style="width: 100%">
            <el-table-column prop="skuId" label="SkuId" />
            <el-table-column prop="title" label="规格标题" />
            <el-table-column prop="skuGroupShopPrice" label="团购价格(元)" />
            <el-table-column label="库存">
              <template #default="scope">
                <span>{{scope.row.stock}}(件)</span>
              </template>
            </el-table-column>
            <el-table-column prop="originalPrice" label="原始价格(元)" />
            <el-table-column prop="price" label="售卖价格(元)" />
            <el-table-column prop="vipPrice" label="会员价格(元)" />
            <el-table-column prop="barCode" label="国际条码" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="团购ID" prop="id" align="center" />
      <el-table-column label="商品ID" prop="spuId" align="center" />
      <el-table-column label="商品名称" prop="title" align="center" />
      <el-table-column label="商品主图" align="center">
        <template #default="scope">
          <img :src="scope.row.img" style="width:30px;" />
        </template>
      </el-table-column>
      <el-table-column label="未满策略" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.automaticRefund?'warning':'danger'">{{ scope.row.automaticRefund==1?'发货':'不发货' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status?'':'danger'">{{ scope.row.status==0?'冻结':'进行' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="gmtStart" align="center">
        <template #default="scope">
          <span>{{ time(scope.row.gmtStart)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" prop="gmtEnd" align="center">
        <template #default="scope">
          <span>{{ time(scope.row.gmtEnd)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前人数" prop="buyerNum" align="center" />
      <el-table-column label="目标人数" prop="minNum" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <!-- 对话框 -->
          <!-- 修改按钮 -->
          <el-button size="small" type="primary" @click="amendnew(scope.$index, scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete( scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 抽屉 -->
    <div>
      <el-drawer v-model="drawer" direction="ltr" size="50%" :before-close="handleClose">
        <template #title>
          <h4>{{titles}}团购商品</h4>
        </template>
        <!-- 内容 -->
        <div class="box">
          <h4>商品属性(spu)</h4>
          <el-form :inline="true" :model="addr" class="demo-ruleForm" status-icon label-width="150px">
            <el-form-item label="团购商品" prop="spuId">
              <el-cascader v-model="addr.spuId" :options="typeData" :props="props" @change="spuId" />
            </el-form-item>
            <!-- 时间 -->
            <el-form-item label="团购时间 " style="width: 100%;">
              <el-date-picker v-model="timearr" type="datetimerange" :clearable="true" range-separator="到" start-placeholder="开始" end-placeholder="结束" value-format="x" />
            </el-form-item>
            <el-form-item label="团购基础人数" style="width: 100%;">
              <el-input-number v-model="addr.minNum" :min="1" :max="999" controls-position="right" />
            </el-form-item>
            <el-form-item label="活动结束时候人数没有达到基础人数采取">
              <el-radio-group v-model="addr.automaticRefund">
                <el-button :type="addr.automaticRefund?'primary':''" @click="addr.automaticRefund=1">不退款,我要发货</el-button>
                <el-button :type="addr.automaticRefund?'':'primary'" @click="addr.automaticRefund=0">自动退款,我不发货</el-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <!-- 列表 -->
        <div class="box">
          <h4 style="width:85%;height:100%;display: inline-block;">商品属性(spu)</h4>
          <!-- 批量定价 -->
          <el-popover v-model:visible="visible" placement="right" :width="400" trigger="click">
            <template #reference>
              <el-button type="primary" plain style="width:15%;height:100%;display: inline-block;" @click="visible = true">批量定价</el-button>
            </template>
            <el-form :inline="true" class="demo-ruleForm" status-icon label-width="150px">
              <el-form-item label="团购价格" prop="skuGroupShopPrice" style="width: 100%;">
                <el-input-number v-model="pricings" :min="1" controls-position="right" />元
              </el-form-item>
            </el-form>
            <div style="margin: 0 auto; text-align: center">
              <el-button size="small" type="text" @click="visible = false">取消</el-button>
              <el-button size="small" type="primary" @click="pricing">确认</el-button>
            </div>
          </el-popover>

          <!-- 内容 -->
          <!-- 表单 -->
          <el-table :data="tableDatas" border style="width: 100%">
            <el-table-column label="SkuId" prop="id" align="center" />
            <el-table-column label="Sku条形码" prop="barCode" align="center" />
            <el-table-column label="类型名" prop="title" align="center" />
            <el-table-column label="库存" prop="stock" align="center" />
            <el-table-column label="现价/元" prop="price" align="center" />
            <el-table-column label="团购价/元" prop="skuGroupShopPrice" align="center" />
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <!-- 对话框 -->
                <el-button type="text" @click="dialogVisible = true">
                  <el-button size="small" type="primary" @click="update(scope.$index, scope.row)">更新</el-button>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 操作 -->
        <template #footer>
          <div style="flex: auto">
            <el-button @click="cancelClick">取消</el-button>
            <el-button type="primary" @click="titles=='创建'? addnew() : edit()">{{titles=='创建'? "新增" : "编辑"}}</el-button>
          </div>
        </template>
      </el-drawer>
    </div>

    <!-- 更新 -->
    <el-dialog v-model="dialogVisible" title="更新团购价格" width="600px" :before-close="handleCloses">
      <!-- 内容 -->
      <el-form :inline="true" :model="updates" class="demo-ruleForm" status-icon label-width="120px">
        <el-form-item label="团购价格" style="width: 100%;">
          <el-input-number v-model="updates.skuGroupShopPrice" :min="1" :max="99999" controls-position="right" />
        </el-form-item>
        <p>
          <el-form-item label="现价" prop="price">{{updates.price}}元</el-form-item>
        </p>

        <p>
          <el-form-item label="sku类型名" prop="title">{{updates.title}}</el-form-item>
        </p>
      </el-form>
      <template #footer>
        <el-button @click="cancelClicks()">取消</el-button>
        <el-button type="primary" @click="updatep">确认</el-button>
      </template>
    </el-dialog>

    <!-- 分页 -->
    <paging-vue v-bind="index" @limits="limitv" @pages="pagev"></paging-vue>
  </div>
</template>

<script>
import { post, get } from '@/utils/http.js' // 引入封装工具

export default {
  data() {
    return {
      index: {
        page: 1, // 分页
        limit: 10, // 每页显示条数
        total: 10 // 总数
      },
      // 输入框
      input: {
        id: '',//团购商品的ID
        spuName: '',//团购商品的名称
        status: '',//团购商品的状态
      },
      // 弹框数据
      addr: {
        minNum: 1, // 团购最低人数
        spuId: "",//关联值
        gmtStart: "", // 开始时间
        gmtEnd: "", // 结束时间
        automaticRefund: "",//团购人数未满是否自动退款
        skuGroupShopPrice: '', //团购价
      },
      adds: {
        minNum: 1, // 团购最低人数
        spuId: "",//关联值
        gmtStart: "", // 开始时间
        gmtEnd: "", // 结束时间
        automaticRefund: "",//团购人数未满是否自动退款
      },
      id: '',
      updates: {//更新
        skuGroupShopPrice: 1, // 团购价格
        title: '',//类型名
        price: 10,//现价
      },
      indexs: '',
      pricings: 0,//定价
      timearr: [],//时间
      tableData: [], // 数据
      tableDatas: [],//详细数据
      // 关联数据
      typeData: [],
      // Cascader 级联选择器配置信息
      props: {
        value: "id",
        label: "label",
        children: "children",
        emitPath: false
      },
      titles: '创建',
      // 对话框
      loading: false,
      drawer: false,// 抽屉显示/隐藏
      visible: false, //默认内容不显示
      dialogVisible: false,//更新显示/隐藏
    }
  },

  created() {
    this.record() // 调用数据接口
  },

  methods: {
    // 时间戳
    time(value) {
      // 时间戳转换日期格式方法
      const date = new Date(value)
      const y = date.getFullYear() // 年
      const MM = date.getMonth() + 1 // 月
      const d = date.getDate() // 日
      const h = date.getHours() // 时
      const m = date.getMinutes() // 分
      const s = date.getUTCSeconds()// 秒
      const time = `${y}-${MM}-${d} ${h}:${m}:${s}`
      return time
    },

    // 数据
    record() {
      const data = {
        _gp: 'admin.groupshop', // 请求参数
        _mt: 'list', // 请求参数
        id: this.input.id,//团购ID
        spuName: this.input.spuName,//团购商品的名称
        status: this.input.status,//团购商品的状态
        page: this.index.page,
        limit: this.index.limit
      }
      get(data).then((res) => {
        if (res.data.errno == 200) {
          this.tableData = res.data.data.items // 数据
          this.index.total = res.data.data.total // 分页总数
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },
    // 详情数据
    spuId(row) {
      const data = {
        _gp: 'admin.product', // 请求参数
        _mt: 'detail', // 请求参数
        spuId: row,//团购商品的ID
      }
      get(data).then((res) => {
        if (200 == res.data.errno) {
          this.tableDatas = res.data.data.skuList // 数据
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },
    // 搜索
    sous() {
      this.record() // 调用数据接口
    },

    // 更新
    update(index, row) {
      this.updates.skuGroupShopPrice = row.skuGroupShopPrice
      this.updates.title = row.title
      this.updates.price = row.price
      this.indexs = index
      this.visible = false; // 弹出框显示/隐藏

    },
    // 更新确认
    updatep() {
      this.tableDatas[this.indexs].skuGroupShopPrice = this.updates.skuGroupShopPrice
      this.dialogVisible = false//更新显示/隐藏
    },

    pricing() {
      this.tableDatas.forEach((item) => {
        item.skuGroupShopPrice = this.pricings
      })
      this.visible = false
    },
    // 添加弹框
    addtan() {
      if (!this.typeData.length) {
        let data = {
          _gp: "admin.product",
          _mt: "getSpuBigTree",
        }
        post(data).then(res => {
          let { data } = res.data
          this.typeData = data
        })
      }
      this.drawer = true; // 弹出框显示/隐藏
      Object.assign(this.addr, this.adds);
      this.titles = '创建'
      this.timearr = []
      this.record()
    },
    // 添加提交
    addnew() {
      // 输入判断
      if (!this.verify()) {
        return false
      }
      let datas = this.tableDatas.map(item => {
        return {
          skuId: item.id,
          skuGroupShopPrice: item.price
        }
      })
      const data = {
        _gp: "admin.groupshop",
        _mt: "create",
        spuId: this.addr.spuId,//关联值
        gmtStart: this.timearr[0], // 开始时间
        gmtEnd: this.timearr[1], // 结束时间
        minNum: this.addr.minNum, // 团购最低人数
        automaticRefund: this.addr.automaticRefund,//团购人数未满是否自动退款
        groupShopSkuList: JSON.stringify(datas)
      };
      post(data).then((res) => {
        if (200 == res.data.errno
        ) {
          ElMessage.success("添加成功");
          this.drawer = false; // 弹出框显示/隐藏
          this.record();
        } else {
          ElMessage.error(res.data.errmsg);
        }
      });
    },

    // 修改弹窗
    amendnew(index, row) {
      if (!this.typeData.length) {
        let data = {
          _gp: "admin.product",
          _mt: "getSpuBigTree",
        }
        post(data).then(res => {
          let { data } = res.data
          this.typeData = data
        })
      }
      this.addr = row
      this.tableDatas = row.groupShopSkuDTOList
      this.id = row.id
      this.timearr[0] = row.gmtStart
      this.timearr[1] = row.gmtEnd
      this.titles = '编辑'
      this.drawer = true

    },
    // 编辑提交
    edit() {
      // 输入判断
      if (!this.verify()) {
        return false
      }

      let datas = this.tableDatas.map(item => {
        return {
          skuId: item.id,
          skuGroupShopPrice: item.skuGroupShopPrice
        }
      })
      const data = {
        _gp: 'admin.groupshop', // 请求参数
        _mt: 'edit', // 请求参数
        id: this.addr.id,
        spuId: this.addr.spuId,//关联值
        gmtStart: this.timearr[0], // 开始时间
        gmtEnd: this.timearr[1], // 结束时间
        minNum: this.addr.minNum, // 团购最低人数
        automaticRefund: this.addr.automaticRefund,//团购人数未满是否自动退款
        groupShopSkuList: JSON.stringify(datas)
      }
      post(data).then((res) => {
        if (200 == res.data.errno) {
          ElMessage.success('修改成功')
          Object.assign(this.addr, this.adds);
          this.tableDatas = []
          this.id = ''
          this.drawer = false
          this.record()
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },

    // 删除
    handleDelete(row) {
      ElMessageBox.confirm('确认删除?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const data = {
            _gp: 'admin.product', // 请求参数
            _mt: 'delete', // 请求参数
            spuId: row.spuId,//ID
          }
          post(data).then((res) => {
            if (200 == res.data.errno) {
              ElMessage.success('删除成功')
              this.record()
            } else {
              ElMessage.error(res.data.errmsg)
            }
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作！'
          })
        })
    },

    // 取消
    cancelClick() {
      this.drawer = false
      this.visible = false
      this.dialogVisible = false,
        ElMessage({
          type: 'info',
          message: '取消操作！'
        })
    },
    cancelClicks() {
      this.dialogVisible = false,
        ElMessage({
          type: 'info',
          message: '取消操作！'
        })
    },

    // 关闭抽屉
    handleClose(done) {
      this.visible = false
      if (this.loading) {
        return
      }
      ElMessageBox.confirm('确认关闭?')
        .then(() => {
          this.loading = true
          timer = setTimeout(() => {
            done()
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false
            }, 200)
          }, 250)
        })
        .catch(() => {
          // catch error
        })
    },

    // 弹框
    handleCloses(done) {
      ElMessage({
        type: 'info',
        message: '取消操作！'
      })
        ; (this.dialogVisible = false)
    },
    // 分页
    limitv(e) {
      this.index.limit = e
      this.record()
    },
    pagev(e) {
      this.index.page = e
      this.record()
    },

    // 验证
    verify() {
      const { spuId, automaticRefund } = this.addr
      // 团购商品验证
      if (spuId == '') {
        ElMessage.error('团购商品不能为空！')
        return false
      }

      // 团购时间验证
      if (this.timearr == '') {
        ElMessage.error('时间不能为空！')
        return false
      }

      // 选择验证
      if (this.automaticRefund == '') {
        ElMessage.error('选择不能为空！')
        return false
      }

      return true
    }

  }
}
</script>

<style lang="less" scoped>
// 输入框
.el-input {
  width: 200px;
}

// 盒子阴影
.box {
  padding: 15px;
  box-shadow: 0px 0px 15px 5px #ccc;
}
</style>
